<template lang="html">
      <!-- 公共组件：红热门电台 -->
      <div class="" >
          <div class="container" v-for="(items,index) in hotRadiosData">
                <div class="title">
                  <h3>{{items.title}}</h3>
                </div>
                <div class="card" v-for="(item,index) in items.detialData">
                    <div class="poster">
                        <img :src="item.url" alt="">
                    </div>
                    <div class="info">
                        <div class="name">{{item.desc}}</div>
                    </div>
                </div>
          </div>
      </div>
</template>

<script>
export default {
  name:"hotradios",
  data(){
    return{
      hotRadiosData:[

      ]
    }
  },
  created(){
      const hotRadiosUrl="http://localhost:8080/static/hotRadios.json"
      // const recommendSeeUrl=this.HOST+"/v1/restserver/ting?method=baidu.ting.song.getRecommandSongList&song_id=877578&num=5"
      this.$axios.get(hotRadiosUrl)
      .then(res=>{
          this.hotRadiosData=res.data.hotRadiosData;
      })
      .catch((error) => {
        console.log(error);
      })
  }


}
</script>

<style scoped>
.container{
  overflow: hidden;
  background-color: #fff;
}
.container .title{
  width: 100%;
  height: .65rem;
  padding:0.2rem 0 0 0.2rem;
  font-size:18px;
  font-weight:bold;
  box-sizing: border-box;
}
.container .card{
    width: 33.3%;
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 5px 20px;
}
.card .poster img {
    width: 2.38rem;
    height: 2.38rem;
}
.card .info {
    width: 2.38rem;
}
.card .info .name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

</style>
